<template>
  <view class="whole">
    <u-toast ref="uToast" />
    <u-navbar
      back-text=""
      title=""
      :background="background"
      :border-bottom="false"
      title-color="#ffffff"
      :is-back="false"
    >
      <view class="slot-wrap">
        <image
          src="../../static/jiantous.png"
          mode=""
          style="width: 34rpx; height: 34rpx; margin-right: 60rpx"
          @click="returns()"
        ></image>
        <text style="font-size: 34rpx; color: #ffffff; font-weight: bold"
          >合成藏品</text
        >
        <view
          style="font-size: 28rpx; color: #1FE7E7; margin-right: 0rpx"
          @click="torecord()"
        >
          合成记录</view
        >
      </view>
    </u-navbar>
    <!-- <view class="top_view"></view> -->
    <!-- <view class="title">
			<image src="../../static/jiantous.png" mode="" style="width: 34rpx;height: 34rpx;margin:0  90rpx 0 30rpx;" @click="returns()"></image>
			<text style="font-size: 32rpx;color: #FFFFFF;font-weight: bold;">合成藏品</text>
			<view style="font-size: 28rpx;color: #FBDA96;margin-right: 0rpx;" @click="torecord()"> 合成记录</view>
		</view> -->

    <view class="exhibit" v-if="Collection.length != 0">
      <view class="Collection">
        <view class="Collection_item">
          <block v-for="(item, index) in Collection" :key="index">
            <view class="Collection_img" @click="todetails(index)">
              <view class="item_right_top" v-if="item.type == 1">合成中</view>
              <view class="item_right_end" v-else-if="item.type == 2"
                >已结束</view
              >
              <view class="item_right_end" v-else>未开始</view>
              <view class="" style="padding-top: 10rpx">
                <image :src="item.cover" class="Collection_image"></image>
                <!-- <u-lazy-load :image="item.user_product_snap.product_snap.cover" :loading-img="loadingImg" border-radius="24" style="width: 240rpx;height: 240rpx;min-height: 240rpx;" ></u-lazy-load> -->
              </view>
              <view class="Collection_right">
                <view class="Collection_right_text">{{ item.name }}</view>
                <view class="Collection_right_center">
                  <view class="Collection_right_center_left">
                    <text class="item_center" style="">限量</text>
                    <text style="margin-left: 20rpx"
                      >{{ item.total_num }}份</text
                    >
                  </view>
                  <text
                  v-if="item.is_show_surplus_num == 1"
                    style="
                      margin-left: 20rpx;
                      color: #BBBBBE;
                      line-height: 40rpx;
                    "
                    >剩余 {{ item.surplus_num }}份</text
                  >
                </view>
                <view style="display: flex; align-items: center">
                  <view style="font-size: 24rpx; color: #bbbbbe"
                    >结束时间：</view
                  >
                  <text
                    style="font-size: 24rpx; color: #bbbbbe"
                    v-if="!item.startstate"
                    >{{ item.merge_info.end_at }}</text
                  >
                  <u-count-down
                    :timestamp="item.countDown"
                    separator="colon"
                    separator-color="#BBBBBE"
                    style="margin-left: 8rpx"
                    v-else
                    separator-size="28"
                    font-size="28"
                    @end="end(index)"
                    color="#BBBBBE"
                    :show-border="false"
                    bg-color="#1C1E27"
                  ></u-count-down>
                </view>
              </view>
            </view>
          </block>
        </view>
      </view>
    </view>

    <view class="exhibits" v-if="Collection.length == 0 && state">
      <empty :show.sync="Collection.length == 0 && state"></empty>
    </view>
  </view>
</template>

<script>
import api from "../../api/api";
import moment from "moment";
import { getTimeleft } from "@/utils/timeleft.js";

export default {
  data() {
    return {
      background: {
        backgroundColor: "#1E2020",
      },
      Collection: [],
      page: 1,
      state: false,
    };
  },
  onload() {},
  onReachBottom() {
    this.page++;
    this.Collectionlist();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.Collectionlist();
  },
  onShow() {
    this.Collectionlist();
  },
  methods: {
    torecord() {
      uni.navigateTo({
        url: `../compositerecord/compositerecord`,
      });
    },
    end(index) {
      this.Collection[index].type = 2;
      this.Collection[index].startstate = false;
      console.log(index);
      // this.Collectionlist()
    },
    async Collectionlist() {
      let res = await api.productList({
        query: {
          keyword: "",
          category: 3,
          page: this.page,
        },
      });
      // res.data.forEach(el => {
      //   el.user_product_snap = JSON.parse(el.user_product_snap)
      //   el.user_product_snap.product_snap = JSON.parse(el.user_product_snap.product_snap)
      // });
      uni.stopPullDownRefresh();
      if (this.page == 1) {
        this.Collection = res.data;
        if (res.data.length == 0) {
          this.state = true;
        }
      } else {
        this.Collection = [...this.Collection, ...res.data];
      }
      this.Collection.forEach((el, index) => {
        el.type = 1;
        let newTime = moment();
        el.countDown = getTimeleft(el.merge_info.end_at, newTime).duration;
        if (el.countDown > 0 && el.countDown <= 86400) {
          el.startstate = true;
        }
        if (el.countDown > 0) {
          el.type = 1;
        } else {
          el.startstate = false;
          el.type = 2;
        }

        el.startDown = getTimeleft(el.merge_info.start_at, newTime).duration;
        if (el.startDown > 0) {
          el.type = 3;
        }

        if (el.surplus_num == 0) {
          el.type = 2;
        }
        // console.log(el.startDown,'el.startDown');
        // console.log(el.countDown,'el.countDown');
      });
    },
    returns() {
      uni.navigateBack({
        delta: 1,
      });
    },
    todetails(index) {
      if (
        this.Collection[index].type == 2 ||
        this.Collection[index].surplus_num == 0
      ) {
        this.$refs.uToast.show({
          title: "活动已结束",
        });
        return;
      }
      if (this.Collection[index].type == 3) {
        this.$refs.uToast.show({
          title: "活动未开始",
        });
        return;
      }
      uni.navigateTo({
        url: `../compounddetails/compounddetails?id=${this.Collection[index].id}&merge_info_id=${this.Collection[index].merge_info.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../style/yuanchuang.scss";
.slot-wrap {
  display: flex;
  align-items: center;
  /* 如果您想让slot内容占满整个导航栏的宽度 */
  flex: 1;
  justify-content: space-between;
  /* 如果您想让slot内容与导航栏左右有空隙 */
  padding: 0 30rpx;
}
.whole {
  width: 100%;
  height: 100%;
  background-color: $bg-color1;
  min-height: 100vh;
  // min-height: calc(100vh - 120rpx);
  .title {
    position: fixed;
    top: 86rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    // margin: 0 30rpx;
    padding: 0 30rpx 0 0;
    z-index: 99;
    background-color: $bg-color1;
    height: 88rpx;
  }
}

.content {
  width: 690rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  padding: 0 30rpx 0 30rpx;
  background: #13111b;

  // background-image: url(../../static/index_bg.png);
  // background-repeat: no-repeat;
  // background-size: 100% 510rpx;
}

.search {
  width: 690rpx;
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  &_logo {
    width: 192rpx;
    height: 54rpx;
  }
  &_icon {
    width: 40rpx;
    height: 40rpx;
  }
}
.top {
  width: 690rpx;
  height: 280rpx;
  background: black;
  border-radius: 24rpx;
  &_image1 {
    width: 690rpx;
    height: 280rpx;
  }
}
.u-tabs_line {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  .u-tabs_wrapper {
    width: 70%;
  }
}
.exhibit {
  // overflow: hidden;
  // padding-top: 180rpx;
  &_item {
    width: 690rpx;
    height: 904rpx;
    background: #1d1d28;
    border-radius: 36rpx;
    &_wrapper {
      position: relative;
      width: 690rpx;
      height: 690rpx;
    }
    &_timer {
      z-index: 1;
      position: absolute;
      top: 26rpx;
      left: 26rpx;

      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20rpx;
      // width: 408rpx;
      height: 60rpx;
      background: #000000;
      border-radius: 30rpx;
      // opacity: 0.46;
      background-color: rgba(0, 0, 0, 0.46);
    }
    &_timerIcon {
      width: 32rpx;
      height: 32rpx;
    }
    &_timerText {
      margin-left: 8rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #f78623;
      line-height: 40rpx;
      // opacity: 0.46;
    }
    &_sale1 {
    }
    &_sale2 {
      margin-left: 12rpx;
    }
    &_goodsImage {
      border-radius: 36rpx;
      width: 690rpx;
      height: 690rpx;
    }
    &_bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    &_left {
      margin: 30rpx 0 0 30rpx;
    }
    &_right {
      height: 138rpx;
      margin: 46rpx 30rpx 0 0;
    }
    &_first {
      width: 400rpx;
      height: 44rpx;
      font-size: 32rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 44rpx;

      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    &_second {
      display: flex;
      align-items: center;

      margin: 20rpx 0;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;

      // width: 202rpx;
      height: 34rpx;
      border-radius: 4rpx;
    }
    &_limited {
      // width: 76rpx;
      padding: 0 14rpx;
      height: 34rpx;
      color: $text-color4;
      background: $button;background-repeat: no-repeat;background-size: 100%;
      border-radius: 4rpx;
      text-align: center;
    }
    &_inStock {
      padding: 0 14rpx;
      // margin-left: 10rpx;
      font-size: 24rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 34rpx;
      background: #262934;
    }
    &_third {
      display: flex;
      align-items: center;

      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;
    }
    &_avatar {
      border-radius: 50%;
      margin-right: 8rpx;
      width: 36rpx;
      height: 36rpx;
    }
    &_username {
      font-size: 26rpx;
      font-weight: 500;
      color: #ffffff;
      line-height: 36rpx;
    }
    &_button {
      margin-left: calc(100% - 116rpx);
      width: 116rpx;
      height: 56rpx;
      border-radius: 28rpx;
      text-align: center;

      font-size: 28rpx;
      font-weight: 400;
      line-height: 56rpx;
      color: $text-color4;
      background: $button;background-repeat: no-repeat;background-size: 100%;
    }
    &_buttonGray {
      margin-left: calc(100% - 116rpx);
      width: 116rpx;
      height: 56rpx;
      background: #999999;
      border-radius: 28rpx;
      text-align: center;

      font-size: 28rpx;
      font-weight: 400;
      color: #ffffff;
      line-height: 56rpx;
    }
    &_price {
      margin-top: 34rpx;
      font-size: 40rpx;
      font-family: SFPro-Bold, SFPro;
      font-weight: bold;
      color: #ffffff;
      line-height: 48rpx;
    }
  }
  &_item:not(:first-child) {
    margin-top: 30rpx;
  }
  &_item:last-child {
    margin-bottom: 30rpx;
  }
}
.Collection {
  color: #ffffff;
  font-size: 32rpx;
  margin: 30rpx;
  background-color: $bg-color1;
}

.Collection_item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  .item_right_top {
    position: absolute;
    right: 0;
    top: 0rpx;
    color: $text-color4;
    background: $gradient1;
    border-radius: 0px 24rpx 0px 24rpx;
    width: 105rpx;
    font-size: 22rpx;
    text-align: center;
    height: 40rpx;
    line-height: 40rpx;
  }
  .item_right_end {
    position: absolute;
    right: 0;
    top: 0rpx;
    background: #646465;
    border-radius: 0px 24rpx 0px 24rpx;
    width: 105rpx;
    font-size: 22rpx;
    text-align: center;
    height: 40rpx;
    line-height: 40rpx;
  }

  /* align-items: flex-start;
		margin:30rpx 0; */
  .Collection_img {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    /* border: 2rpx solid rgba(255,255,255,0.1); */
    background-color: $bg-color3;
    /* padding-bottom: 30rpx; */
    /* border-radius: 80rpx 80rpx 24rpx 24rpx; */
    border-radius: 24rpx;
    margin: 15rpx 0 15rpx 0;
    width: 100%;
    height: 240rpx;

    // background-image: url('/static/background.png');
    //  background-repeat: no-repeat;
    //  background-position: center;
    //  /* background-attachment: fixed; */
    //  background-size: cover;
    //  -webkit-background-size: cover;
    //  -moz-background-size: cover;
    //  -o-background-size: cover;
    .Collection_image {
      width: 240rpx;
      height: 240rpx;
      border-radius: 10.91px 0px 0px 10.91px;
    }

    .Collection_right {
      margin-left: 30rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 200rpx;
      .Collection_right_text {
        font-size: 28rpx;
        // padding-top: 15rpx;

        width: 320rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 1;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
    }
  }
}
.Collection_right_center {
  font-size: 24rpx;
  display: flex;
  .Collection_right_center_left {
    height: 40rpx;
    background-color: #4E4E4F;
    //  width:200rpx;
    padding-right: 20rpx;
    .item_center {
      font-size: 24rpx;
      border-radius: 4rpx;
      width: 80rpx;
      padding: 0 14rpx;
      height: 40rpx;
      margin-top: -5rpx;
      line-height: 40rpx;
      color: $text-color4;
      background: $gradient1;
    }
  }
}
.top_view {
  height: var(--status-bar-height);
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: #111218 !important;
}

.exhibits {
  width: 100%;
  height: 100%;
  background-color: $bg-color1;
  min-height: 40vh;
  padding-top: 50px;
  padding-bottom: 10rpx;
}
</style>
